<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框练习</title>
		<!--1.画圆型
		    2.画正三角形
		 思路1：    html      div元素
		           css      倒角，必须有边框
	     思路2：    html      div元素  #triangle		   
				   css       斜边
				             不设置宽高
							 左边框：50像素实线红色      transparency
							 右边框：50像素实线黄色      transparency
							 下边框：50像素实线蓝色、透明度 .3
							 颜色值：rgba(255,255,0,)
		 -->
		 <style>
			 /*圆*/
			 div#circle{
				 width: 200px;
				 height: 200px;
				border: 1px solid red;
				border-radius:200px;
				
				/*边框阴影属性  box-shadow属性*/
			box-shadow:50px 5px 50px 5px red  inset;
				box-shadow:50px 50px 5px 5px red  outset;
			 }
			 
			 
			 /*正三角形*/
			div#triangle{
				width: 0;
				border-left:50px solid transparent;
			    border-right:50px solid transparent;
				border-bottom:50px solid rgba(0, 0,255,.3);
				}
	
				/*精简两行   全部设置为透明色，上面的三角设置颜色*/
				div#triangle02{
					width: 0;
					border:50px solid transparent;
					border-top-color:rgba(222, 90, 169,0.1) ;
					}
					 input{
										 outline: 1px solid red;
										 outline: 0; /* 去掉边框效果，通配选择器中 */
										 
									 }
		 </style>
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		<div id="triangle02"></div>
		文本框：<input type="text">
	</body>
</html>